<template>
    <view>
        <view v-if="!showFinalResult" class="box" @touchstart.stop.prevent="handleButtonClick">
            <!-- 轮数显示 -->
            <view class="round-text" v-show="!showFinalResult">{{ currentRound }}/{{ totalRounds }}次测试</view>

            <!-- 微信小程序隐藏input用于捕获键盘事件 -->
            <!-- 添加ref以便在mounted中手动聚焦 -->
            <!-- 只在非手机端显示 -->
            <input ref="hiddenInput" type="text" class="hidden-input" auto-focus focus @input="handleInputChange"
                @confirm="handleInputConfirm" placeholder="" v-if="!isMobileDevice && !showFinalResult" />

            <!-- <view style="margin-top: 200px;">
            <view v-if="icon1Style">{{ icon1Style.left }} {{ icon1Style.top }}</view>
            <view v-if="icon2Style"> {{ icon2Style.left }} {{ icon2Style.top }}</view>
        </view> -->

            <!-- 图标1 -->
            <image mode="widthFix" class="tubiao" :src="latestData.images.icon1" v-if="icon1Style"
                :style="'left:' + icon1Style.left + ';top:' + icon1Style.top" v-show="showIcon1">
            </image>

            <!-- 图标2 -->
            <image mode="widthFix" class="tubiao" :src="latestData.images.icon2" v-if="icon2Style"
                :style="'left:' + icon2Style.left + ';top:' + icon2Style.top" v-show="showIcon2">
            </image>

            <!-- v-show="showTestButton" -->
            <!-- 测试中按钮 -->
            <!-- 下面这5个是随机给bnt2当背景的 -->
            <!-- https://game.z550.com/static/1.png
         https://game.z550.com/static/2.png
         https://game.z550.com/static/3.png
         https://game.z550.com/static/4.png
         https://game.z550.com/static/5.png -->
            <view class="btn2" :style="getRandomButtonBackgroundStyle">
            </view>

            <!-- 结果显示 -->
            <view class="result1" v-show="showEarlyClickResult" @click.stop="goBack">
                <view class="words">
                    <view>人还没死你就烧啊?</view>
                    <view>零分!</view>
                </view>
            </view>
            <view class="result2" v-show="showReactionTimeResult && !showRoundText">反应时间: {{ (reactionTime || 0).toFixed(2)
            }}ms
            </view>

            <!-- 倒计时显示 -->
            <view class="countdown-section" v-show="showCountdown">
                <view class="countdown">{{ countdown }}</view>
                <view class="current-reaction-time" v-if="reactionTime > 0">本次反应时间: {{ (reactionTime || 0).toFixed(2) }}ms
                </view>
            </view>

            <!-- 最终结果显示 -->


        </view>
        <view class="resultbgs" v-show="showFinalResult">
            <view class="final-result">
                <view class="final-title">测试完成！</view>
                <view class="final-time">平均反应时间: {{ (averageReactionTime || 0).toFixed(2) }}ms</view>
                <view class="final-evaluation">{{ finalEvaluation }}</view>

                <!-- 每轮反应时间显示 -->
                <view class="rounds-results">
                    <view class="rounds-title">各轮反应时间：</view>
                    <view class="rounds-list">
                        <view class="round-item" v-for="(time, index) in reactionTimes" :key="index">
                            第{{ index + 1 }}轮: {{ (time || 0).toFixed(2) }}ms
                        </view>
                    </view>
                </view>

                <button class="restart-button" @click.stop="restartTest">返回</button>
            </view>
            <!-- <view class="gaunggao" :style="'background-image:url(' + latestData.images.testingBtn + ')'">
            </view> -->
            <image mode="widthFix" class="gaunggao" :src="latestData.images.testingBtn">
            </image>
        </view>
    </view>
</template>
<script>
import request from '@/utils/request.js';
import mpShare from '@/uni_modules/uv-ui-tools/libs/mixin/mpShare.js';
export default {
    mixins: [mpShare],
    data() {
        return {
            latestData: {
                images: {}
            },
            totalLocalImages: 22, // 本地图片总数
            isMobileDevice: false, // 是否为手机设备
            gameConfig: null, // 游戏配置
            evaluationRules: [], // 新增：存储评价规则
            totalRounds: 5, // 总测试轮数
            currentRound: 1, // 当前轮数
            showRoundText: true, // 是否显示轮数文字
            showStartButton: false, // 不显示开始按钮
            showTestButton: true, // 直接显示测试中按钮
            showIcon1: false, // 图标1是否显示
            showIcon2: false, // 图标2是否显示
            icon1Style: {}, // 图标1样式
            icon2Style: {}, // 图标2样式
            showEarlyClickResult: false, // 是否显示提前点击结果
            showReactionTimeResult: false, // 是否显示反应时间结果
            reactionTime: 0, // 反应时间(毫秒)
            iconShowTime: 0, // 图标显示时间戳
            randomTimeout: null, // 随机出现图标的定时器
            countdown: 3, // 倒计时秒数
            showCountdown: false, // 是否显示倒计时
            countdownTimer: null, // 倒计时定时器
            reactionTimes: [], // 存储所有轮次的反应时间
            averageReactionTime: 0, // 平均反应时间
            showFinalResult: false, // 是否显示最终结果
            finalEvaluation: '' // 最终评价文本
        }
    },
    created() {
        // 检测是否为手机设备
        const platform = uni.getSystemInfoSync().platform;
        // iOS和Android被视为手机设备
        this.isMobileDevice = ['ios', 'android'].includes(platform.toLowerCase());
        console.log('是否为手机设备:', this.isMobileDevice);
        this.loadGameConfig();
        this.getdata()
    },
    mounted() {
        // 页面加载完成后，加载游戏配置（会自动加载评价规则）
        this.loadGameConfig();
        // 然后直接开始等待图标出现
        this.prepareForNextRound();

        // 使用UniApp的键盘事件监听
        const _this = this;

        // #ifdef H5
        // 仅在H5平台使用document事件
        if (typeof document !== 'undefined') {
            document.addEventListener('keydown', _this.handleKeyPress);
            console.log('H5平台空格键监听已启用');
        }
        // #endif

        // #ifdef MP-WEIXIN
        // 微信小程序环境特殊处理
        console.log('微信小程序环境检测到');

        // 仅在非手机设备上尝试聚焦input
        if (!this.isMobileDevice) {
            // 延迟一下确保DOM已渲染完成，然后尝试手动聚焦input
            setTimeout(() => {
                try {
                    // 获取ref并手动聚焦
                    if (this.$refs.hiddenInput) {
                        // 在Vue中调用input组件的focus方法
                        this.$refs.hiddenInput.focus();
                        console.log('隐藏input已手动聚焦');
                    }
                } catch (error) {
                    console.error('聚焦input失败:', error);
                }
            }, 100);
        } else {
            console.log('手机设备上不显示和聚焦hiddenInput');
        }
        // #endif

        // 通用平台键盘监听
        // 注意：uni.onKeyboardHeightChange只监听键盘高度变化，不监听具体按键
        uni.onKeyboardHeightChange(function (res) {
            console.log('键盘高度变化:', res.height);
        });

        // 尝试添加触摸事件作为备选（适用于所有平台）
        // 注：触摸事件已通过模板中的@click.stop="handleButtonClick"实现
    },
    computed: {
        // 计算属性：随机获取按钮背景图片样式
        getRandomButtonBackgroundStyle() {
            // 生成1到5之间的随机数
            const randomNumber = Math.floor(Math.random() * 5) + 1;
            // 返回背景图片样式字符串
            return `background-image: url('https://game.z550.com/static/${randomNumber}.png')`;
        }
    },
    methods: {
        // 加载游戏配置
        loadGameConfig() {
            try {
                // 读取game.json配置文件
                const configPath = '/game.json';
                const _this = this;

                uni.request({
                    url: configPath,
                    method: 'GET',
                    success: (res) => {
                        if (res.statusCode === 200) {
                            _this.gameConfig = res.data;
                            // 应用配置
                            if (_this.gameConfig.testConfig) {
                                _this.totalRounds = _this.gameConfig.testConfig.rounds || 5;
                                // 如果有UI配置，可以在这里应用
                                if (_this.gameConfig.uiConfig) {
                                    // 可以根据需要设置主题样式等
                                }
                            }
                            console.log('游戏配置加载成功:', _this.gameConfig);
                        }
                    },
                    fail: (err) => {
                        console.error('加载游戏配置失败:', err); _this.loadEvaluationRules();
                    },
                    complete() {
                        // 无论配置是否加载成功，都加载评价规则
                        _this.loadEvaluationRules();
                    }
                });
            } catch (error) {
                console.error('读取游戏配置出错:', error);
                // 出错时也尝试加载评价规则
                this.loadEvaluationRules();
            }
        },

        // 加载评价规则
        loadEvaluationRules() {
            // const _this = this;
            // // 从接口获取评价规则
            // uni.request({
            //     url: '/api.php?action=get_evaluation_rules',
            //     success(res) {

            //         console.log(res)
            //           _this.evaluationRules = res.data.evaluationRules;
            //           console.log(       _this.evaluationRules)
            //         if (res.statusCode === 200 && res.data && Array.isArray(res.data.rules)) {
            //             _this.evaluationRules = res.data.evaluationRules;
            //             // 保存到本地存储作为备份
            //             uni.setStorageSync('evaluationRules', _this.evaluationRules);
            //         } else {
            //             // 尝试从本地存储加载
            //             _this.loadRulesFromStorage();
            //         }
            //     },
            //     fail(res) {  
            //           console.log(res)
            //         // 尝试从本地存储加载
            //         _this.loadRulesFromStorage();
            //     }
            // });
        },

        // 从本地存储加载规则
        loadRulesFromStorage() {
            // const localRules = uni.getStorageSync('evaluationRules');
            // if (localRules && Array.isArray(localRules)) {
            //     this.evaluationRules = localRules;
            // } else {
            //     // 如果本地也没有，使用默认规则
            //     this.evaluationRules = [
            //         { type: 'gt', time: 2000, text: '九灵奶奶！聆听指挥的亲切问候吧' },
            //         { type: 'lt', time: 250, text: '简直就是蓝调在世！' },
            //         { type: 'lt', time: 280, text: '超级九灵！这还说啥了兄弟' },
            //         { type: 'lt', time: 320, text: '顶级操作手！烧得少基本上是对局安排的问题' },
            //         { type: 'lt', time: 400, text: '九灵操作手！20岁的九灵，18岁的她' },
            //         { type: 'lt', time: 500, text: '甲一九灵！老师老师，你烧得这么快跟谁学的？我在抖音跟音免学的' },
            //         { type: 'lt', time: 700, text: '甲组九灵！可以可以，九灵的未来' },
            //         { type: 'lt', time: 1000, text: '九灵妈妈！嗯...至少会烧' }
            //     ];
            // }


        },

        getdata() {
            const _this = this;
            request({
                url: '/api.php',
                method: 'GET',
                header: {
                    'Content-Type': 'application/json'
                }
            }).then(res => {
                if (res.code === 0 && res.data) {
                    // 直接使用返回的数据对象
                    this.evaluationRules = res.data.evaluationRules;
                    console.log(this.evaluationRules)
                    this.latestData = res.data;
                    this.countdown = this.latestData.displayTime
                }
            }).catch(err => {
                console.error('加载数据失败:', err);
            }).finally(() => {
                _this.uploading = false;
            });

        },

        // 获取随机本地图片路径
        getRandomLocalImage() {
            // 生成1到totalLocalImages之间的随机数
            const randomNumber = Math.floor(Math.random() * this.totalLocalImages) + 1;
            // 返回本地图片路径，使用绝对路径格式
            return `/pages/assets/${randomNumber}.jpg`;
        },
        // 开始测试 - 现在直接在mounted中调用prepareForNextRound
        startTest() {
            this.prepareForNextRound();
        },

        // 准备下一轮测试
        prepareForNextRound() {
            // 隐藏所有结果
            this.showEarlyClickResult = false;
            this.showReactionTimeResult = false;

            // 隐藏所有图标
            this.showIcon1 = false;
            this.showIcon2 = false;

            // 确保显示测试中按钮
            this.showTestButton = true;

            // 从配置获取时间范围，优先使用game.json中的配置，其次是接口数据，最后是默认值
            let minTime = 2;
            let maxTime = 6;

            // 优先使用game.json配置
            if (this.gameConfig && this.gameConfig.testConfig) {
                minTime = this.gameConfig.testConfig.minDelay / 1000; // 转换为秒
                maxTime = this.gameConfig.testConfig.maxDelay / 1000; // 转换为秒
            }
            // 其次使用接口数据
            else if (this.latestData && this.latestData.timeRange) {
                minTime = this.latestData.timeRange.min || 2;
                maxTime = this.latestData.timeRange.max || 6;
            }

            // 计算随机延迟（毫秒）
            const randomDelay = Math.floor(Math.random() * (maxTime - minTime) * 1000) + (minTime * 1000);

            this.randomTimeout = setTimeout(() => {
                this.showRandomIcon();
            }, randomDelay);
        },

        // 显示随机图标
        showRandomIcon() {
            // 确保latestData.images中有图标资源才显示
            if (!this.latestData || !this.latestData.images) {
                console.error('图标资源未加载');
                // 使用默认图标作为备选
                if (!this.latestData) this.latestData = {};
                if (!this.latestData.images) this.latestData.images = {};
                this.latestData.images.icon1 = '/static/1.png';
                this.latestData.images.icon2 = '/static/2.png';
            }

            // 随机选择显示图标1或图标2
            const showIcon1 = Math.random() > 0.5;

            // 记录图标显示时间，使用Date.now()获取时间戳
            this.iconShowTime = Date.now();

            // 先隐藏所有图标
            this.showIcon1 = false;
            this.showIcon2 = false;

            if (showIcon1) {
                // 计算随机位置
                const { left, top } = this.getRandomPosition();
                // 确保left不超过70
                const finalLeft = Math.min(left, 70);
                // 先设置样式对象
                this.icon1Style = { left: finalLeft + '%', top: top + '%' };
                // 再设置显示状态，保证同步
                this.showIcon1 = true;
                // 添加日志以便调试
                console.log('显示图标1，位置：', finalLeft, top);
            } else {
                // 计算随机位置
                const { left, top } = this.getRandomPosition();
                // 确保left不超过70
                const finalLeft = Math.min(left, 70);
                // 先设置样式对象
                this.icon2Style = { left: finalLeft + '%', top: top + '%' };
                // 再设置显示状态，保证同步
                this.showIcon2 = true;
                // 添加日志以便调试
                console.log('显示图标2，位置：', finalLeft, top);
            }
        },

        // 获取随机位置，确保不与btn2按钮重叠
        getRandomPosition() {
            // 确保图标不会被按钮遮挡，并且完全显示在屏幕内
            // btn2按钮尺寸：宽度40%，高度根据图片比例
            // 图标尺寸：宽度20%
            let left, top;
            const maxAttempts = 10; // 最大尝试次数
            let attempts = 0;

            do {
                attempts++;
                // 随机左侧、中央或右侧位置，但避开btn2按钮区域
                const positionType = Math.random();

                if (positionType < 0.33) {
                    // 左侧位置：0% - 30% (避开中央按钮区域)
                    left = Math.floor(Math.random() * 30);
                } else if (positionType < 0.66) {
                    // 右侧位置：70% - 90% (避开中央按钮区域)
                    left = 70 + Math.floor(Math.random() * 20);
                } else {
                    // 上下位置：25% - 75%水平范围，但避开垂直重叠区域
                    left = 25 + Math.floor(Math.random() * 50);
                }

                // 随机垂直位置：
                // 如果是左右位置，垂直范围可以大一些：10% - 90%
                // 如果是上下位置，需要避开按钮垂直区域：10% - 35% 或 65% - 90%
                if (positionType < 0.66) {
                    top = 10 + Math.floor(Math.random() * 80);
                } else {
                    if (Math.random() > 0.5) {
                        top = 10 + Math.floor(Math.random() * 25);
                    } else {
                        top = 65 + Math.floor(Math.random() * 25);
                    }
                }
            } while (attempts < maxAttempts && this.isOverlappingWithButton(left, top));

            return { left, top };
        },

        // 检查图标是否与btn2按钮重叠
        isOverlappingWithButton(left, top) {
            // 按钮现在在底部中间，水平居中，底部距离210rpx，宽度和高度都是182rpx
            // 转换为百分比（假设屏幕宽度为750rpx作为基准）
            const screenWidth = 750; // 基准屏幕宽度
            const btnWidth = (182 / screenWidth) * 100; // 按钮宽度百分比
            const btnHeight = (182 / screenWidth) * 100; // 按钮高度百分比（假设宽高比为1:1）
            const btnCenterX = 50; // 按钮中心X坐标（相对于屏幕宽度的百分比）
            const btnBottomDistance = (210 / screenWidth) * 100; // 按钮底部距离屏幕底部的百分比

            // 计算按钮的边界
            const btnLeft = btnCenterX - btnWidth / 2; // 按钮左边界（相对于屏幕左边的百分比）
            const btnTop = 100 - btnBottomDistance - btnHeight; // 按钮上边界（相对于屏幕顶部的百分比）
            const btnRight = btnCenterX + btnWidth / 2; // 按钮右边界
            const btnBottom = 100 - btnBottomDistance; // 按钮下边界

            // 计算图标的边界
            const iconLeft = left;
            const iconRight = left + 20; // 图标宽度20%
            const iconTop = top;
            const iconBottom = top + 20; // 假设图标高度20%

            // 检查是否有重叠
            if (iconRight < btnLeft || iconLeft > btnRight || iconBottom < btnTop || iconTop > btnBottom) {
                // 不重叠
                return false;
            } else {
                // 重叠
                return true;
            }
        },

        // 处理按钮点击
        handleButtonClick() {
            if (this.showFinalResult) {
                return
            }
            // 清除随机图标定时器
            if (this.randomTimeout) {
                clearTimeout(this.randomTimeout);
                this.randomTimeout = null;
            }

            // 判断是否提前点击
            if (!this.showIcon1 && !this.showIcon2) {
                // 提前点击，显示错误结果
                this.showEarlyClickResult = true;
                // 隐藏测试中按钮和图标
                this.showTestButton = false;
                this.showIcon1 = false;
                this.showIcon2 = false;
            } else {
                // 计算反应时间，使用Date.now()获取时间戳差，并添加随机小数部分确保不会出现.00
                const baseTime = Date.now() - this.iconShowTime;
                // 生成0.01到0.99之间的随机小数
                const randomDecimal = Math.random() * 0.98 + 0.01;
                // 保留两位小数
                this.reactionTime = Math.round((baseTime + randomDecimal) * 100) / 100;

                this.reactionTimes.push(this.reactionTime); // 保存本次反应时间
                this.showReactionTimeResult = true;

                // 隐藏测试中按钮和图标
                this.showTestButton = false;
                this.showIcon1 = false;
                this.showIcon2 = false;

                // 判断是否是最后一轮测试
                if (this.currentRound === this.totalRounds) {
                    // 第5次测试完成，直接显示结果
                    this.calculateAverageReactionTime();
                    this.showFinalResult = true;
                } else {
                    // 不是最后一轮，继续显示倒计时，准备下一轮
                    this.startCountdown();
                }
            }
        },

        // 开始倒计时
        startCountdown() {
            this.showCountdown = true;
            this.countdown = this.latestData.displayTime;

            this.countdownTimer = setInterval(() => {
                this.countdown--;

                if (this.countdown <= 0) {
                    this.clearCountdown();

                    // 检查是否还有下一轮
                    if (this.currentRound < this.totalRounds) {
                        // 进入下一轮，直接开始等待图标出现
                        this.currentRound++;
                        this.prepareForNextRound();
                    }
                    // 最后一轮的情况已经在handleButtonClick中处理，这里不再重复处理
                }
            }, 1000);
        },

        // 清除倒计时
        clearCountdown() {
            if (this.countdownTimer) {
                clearInterval(this.countdownTimer);
                this.countdownTimer = null;
            }
            this.showCountdown = false;
        },

        // 计算平均反应时间
        calculateAverageReactionTime() {
            console.log(this.finalEvaluation)
            // 过滤掉0或无效的反应时间
            const validTimes = this.reactionTimes.filter(time => time > 0);
            if (validTimes.length > 0) {
                const sum = validTimes.reduce((acc, time) => acc + time, 0);
                this.averageReactionTime = sum / validTimes.length;
                this.finalEvaluation = this.getEvaluationByTime(this.averageReactionTime);
            } else {
                this.averageReactionTime = 0;
                this.finalEvaluation = '无法计算反应时间';
            }
        },

        // 根据反应时间获取评价
        getEvaluationByTime(time) {
            console.log('当前评价规则:', this.evaluationRules);
            console.log('当前反应时间:', time);

            // 确保evaluationRules是有效的数组
            if (Array.isArray(this.evaluationRules) && this.evaluationRules.length > 0) {
                // 先对规则进行排序，确保优先级正确
                // 对于'lt'类型，时间越小优先级越高；对于'gt'类型，时间越大优先级越高
                const sortedRules = [...this.evaluationRules].sort((a, b) => {
                    if (a.type === 'lt' && b.type === 'lt') {
                        return a.time - b.time; // 'lt'类型按时间升序
                    } else if (a.type === 'gt' && b.type === 'gt') {
                        return b.time - a.time; // 'gt'类型按时间降序
                    }
                    return 0;
                });

                // 遍历排序后的规则寻找匹配项
                for (const rule of sortedRules) {
                    // 确保规则对象结构正确
                    if (rule && rule.type && typeof rule.time === 'number' && rule.text) {
                        if (rule.type === 'lt' && time < rule.time) {
                            console.log('匹配到lt规则:', rule);
                            return rule.text;
                        } else if (rule.type === 'gt' && time > rule.time) {
                            console.log('匹配到gt规则:', rule);
                            return rule.text;
                        }
                    }
                }
            }

            // 保存配置信息到本地，用于后续使用
            if (this.gameConfig) {
                try {
                    uni.setStorageSync('gameConfig', JSON.stringify(this.gameConfig));
                } catch (e) {
                    console.error('保存配置到本地失败:', e);
                }
            }

            // 默认返回（如果没有匹配的规则）
            console.log('未匹配到任何规则，使用默认评价');
            return '九灵奶奶！聆听指挥的亲切问候吧';

        },

        // 重新开始测试
        restartTest() {

            // // 重置所有状态
            // this.currentRound = 1;
            // this.reactionTimes = [];
            // this.averageReactionTime = 0;
            // this.showFinalResult = false;
            // this.finalEvaluation = '';
            // this.prepareForNextRound();
            uni.reLaunch({
                url: '/pages/index/index'
            })
        },

        // 返回上一页
        goBack() {
            // 使用uni.navigateBack返回上一页
            // uni.navigateBack({
            //     delta: 1
            // });
            uni.reLaunch({
                url: '/pages/index/index'
            })
        },

        // 处理键盘按键事件 - 只监听空格键
        handleKeyPress(event) {


            // 阻止默认行为以防页面滚动等
            if (event && event.preventDefault) {
                event.preventDefault();
            }


            console.log('空格键被按下');
            console.log(event.keyCode);



            if (event) {
                console.log('空格键被按下');
                console.log(event.keyCode);
                this.handleButtonClick();
                return
            }
            // 检测是否按下的是空格键
            // keyCode 32 或 code === 'Space' 都可以用来检测空格键
            if (event && (event.keyCode === 32 || event.code === 'Space')) {
                console.log('空格键被按下');
                // 调用handleButtonClick方法
                this.handleButtonClick();
            }
        },

        // 微信小程序专用 - 处理输入事件
        handleInputChange(e) {
            console.log('微信小程序输入事件:', e);
            this.handleButtonClick();
            // 检查是否有输入内容
            // if (e && e.detail && e.detail.value) {
            //     // 检查是否按下了空格键
            //     if (e.detail.value.includes(' ')) {
            //         console.log('微信小程序检测到空格键输入');
            //         this.handleButtonClick();

            //         // 清空输入框，以便继续检测下一次输入
            //         setTimeout(() => {
            //             try {
            //                 if (this.$refs.hiddenInput) {
            //                     // 清空输入值
            //                     this.$refs.hiddenInput.value = '';
            //                     // 重新聚焦，确保持续捕获键盘事件
            //                     this.$refs.hiddenInput.focus();
            //                 }
            //             } catch (error) {
            //                 console.error('清空输入框失败:', error);
            //             }
            //         }, 0);
            //     }
            // }
        },

        // 微信小程序专用 - 处理输入确认事件
        handleInputConfirm() {
            console.log('微信小程序输入确认事件');
            this.handleButtonClick();
        }
    },

    // 组件销毁时清除定时器和事件监听
    beforeDestroy() {
        if (this.randomTimeout) {
            clearTimeout(this.randomTimeout);
        }
        if (this.countdownTimer) {
            clearInterval(this.countdownTimer);
        }

        // 移除键盘事件监听
        // #ifdef H5
        if (typeof document !== 'undefined') {
            document.removeEventListener('keydown', this.handleKeyPress);
            console.log('H5平台键盘事件监听已移除');
        }
        // #endif

        // 移除UniApp键盘事件监听
        uni.offKeyboardHeightChange();
        console.log('页面组件已销毁，事件监听器已清理');
    }
}
</script>
<style scoped>
.theviews {
    position: fixed;
    width: 100%;
    top: 300upx;
    bottom: 200upx;
    background: Red
}

/* 隐藏的input样式，用于捕获键盘事件但不显示 */
.hidden-input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    border: none;
    outline: none;
    pointer-events: none;
    z-index: -1;
}

/* 确保在所有平台上都隐藏 */
.hidden-input::-webkit-input-placeholder {
    opacity: 0;
}

.hidden-input::-moz-placeholder {
    opacity: 0;
}

.hidden-input:-ms-input-placeholder {
    opacity: 0;
}

.hidden-input::placeholder {
    opacity: 0;
}

.tubiao {
    width: 163rpx;
    height: 163rpx;
    position: fixed;
    z-index: 10;
}

.gaunggao {
    margin: 0 auto;
    width: 650rpx;
    min-height: 200rpx;
    border-radius: 20rpx;
    margin: 0 auto;
    display: block;
    margin-top: 29rpx;
}

.resultbgs {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    min-height: 100vh;
    padding-bottom: 50rpx;
    box-sizing: border-box;
    background: #e4e4e4;
}

.btn2 {
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-position: center;
    /* left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    position: fixed !important;
    right: -50%;
    bottom: 210rpx;
    width: 182rpx;
    height: 182rpx;
    z-index: 20; */
}

.final-result {
    margin: 0 auto;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 40rpx;
    border-radius: 20rpx;
    text-align: center;
    width: 650rpx;
    z-index: 30;
    margin-top: 106rpx;
    box-sizing: border-box;
}

.final-title {
    font-size: 48upx;
    font-weight: bold;
    margin-bottom: 30upx;
    color: #333;
}

.final-time {
    font-size: 36upx;
    margin-bottom: 30upx;
    color: #666;
}

.final-evaluation {
    font-size: 32upx;
    margin-bottom: 30upx;
    color: #333;
    min-height: 80upx;
}

.rounds-results {
    margin-bottom: 30upx;
    width: 100%;
}

.rounds-title {
    font-size: 28upx;
    margin-bottom: 20upx;
    color: #666;
    text-align: left;
}

.rounds-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15upx;
}

.round-item {
    background-color: #f0f0f0;
    padding: 10upx 20upx;
    border-radius: 15upx;
    font-size: 24upx;
    color: #666;
}

.restart-button {
    background-color: #007aff;
    color: white;
    border: none;
    padding: 20upx 60upx;
    font-size: 32upx;
    border-radius: 10upx;
}

.restart-button:active {
    background-color: #0051a8;
}

.btn1 {
    position: fixed !important;
    right: 50upx;
    bottom: 50upx;
    width: 100upx;
    height: 100upx;
    z-index: 20;
}

.box {
    width: 100%;
    height: 100vh;
    background-color: #f5f5f5;
    position: relative;
}

.round-text {
    position: fixed;
    top: 10%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    font-size: 32rpx;
    padding: 20rpx 24rpx;
    font-weight: bold;
    color: white;
    background: rgba(0, 0, 0, 0.8);
    z-index: 5;
    border-radius: 10rpx;
}

.result1 {
    position: fixed;
    font-size: 20px;
    font-weight: bold;
    z-index: 5;
    background: red;
    z-index: 9;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
}

.words {
    position: fixed;
    top: 50%;
    left: 50%;
    color: white;
    text-align: center;
    font-size: 40upx;
    transform: translate(-50%, -50%);
}

.result2 {
    position: fixed;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 20px;
    color: #008400;
    font-weight: bold;
    z-index: 5;
}

.countdown-section {
    position: fixed;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 15;
}

.countdown {
    width: 100upx;
    height: 100upx;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 48upx;
    font-weight: bold;
    margin: 0 auto;
}

.current-reaction-time {
    margin-top: 20upx;
    font-size: 28upx;
    color: #333;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 10upx 30upx;
    border-radius: 20upx;
}
</style>